<template>
	<view class="u-skeleton">
		<view class="padding">
			<view v-if="order.serviceMethod === '1'" class="bg u-fillet-skeleton margin-bottom"
				style="border-radius: 25rpx 25rpx 0 0;">
				<view class="" style="padding: 30rpx 25rpx 0rpx 25rpx;">
					<view class=" u-flex" @click="getAddressList()">
						<view class="u-flex-1 text-white margin-left-xs">
							<view v-if="detailaddress ==''" class="padding-tb">请选择地址</view>
							<view v-else>
								<view class="u-font-16  text-bold"> {{province}} {{city}} {{district}}{{detailaddress}}
								</view>
								<view class="u-font-14 margin-top-sm u-tips-color flex justify-between">
									<view style="color: #333333;">{{name}}<text class="margin-left-sm">{{mobile}}</text>
									</view>
								</view>
							</view>
						</view>
						<u-icon name="arrow-right" color="#999999"></u-icon>
					</view>
				</view>
				<view style="position: relative;top: 5upx;">
					<image src="../../../static/images/line.png" style="width: 100%;height: 8rpx;"></image>
				</view>
			</view>

			<view class=" bg radius u-skeleton-fillet " style="padding: 25rpx;">
				<view class=" u-flex" style="position: relative;">
					<view class="u-m-r-10">
						<u-avatar :src="order.homepageImg" mode="square" size="100"></u-avatar>
					</view>
					<view class="u-flex-1 text-white margin-left-xs">
						<view class="u-font-16  text-bold u-line-1" style="width: 480rpx;">{{order.myLevel}}</view>
						<view class="u-font-14 margin-top-sm u-tips-color flex justify-between" style="color: #999999;">
							<view><text style="color: #999999;margin-right: 5rpx;"
									v-for="(item,index) in order.gameName">{{item}}</text></view>
						</view>
					</view>
					<!-- <view style="position: absolute;top: 0;right: 0;">
						<view class="text-blue">{{isVip? order.memberMoney :order.money}}元/{{order.unit}}</view>
					</view> -->
				</view>
			</view>
			<view class="padding bg margin-top radius u-skeleton-fillet">
				<view class="flex justify-between margin-top-sm">
					<view class="text-lg" style="color: #1E1F31;width: 140upx;">预约时间</view>
					<view class="flex justify-between padding-bottom-sm" @tap="timeTrue = true">
						<!-- <view>预约时间</view> -->
						<view>
							<!-- <text class="margin-right-xs" v-if="startTime == ''">请选择预约时间</text> -->
							<text class="margin-right-xs">{{startTime?startTime:'请选择预约时间'}}</text>
							<u-icon name="arrow-right" color="#999999"></u-icon>
						</view>
					</view>
				</view>
				<view class="flex justify-between  margin-top-lg">
					<view class="text-lg" style="color: #1E1F31;width: 140upx;">购买数量</view>
					<u-number-box v-model="value" :min='minNum' bg-color="#E6E6E6" color="#fff" @change="valChange">
					</u-number-box>
				</view>
				<view v-if="order.serviceMethod === '2'">
					<view class="flex justify-between  margin-top-lg">
						<view class="text-lg" style="color: #1E1F31;width: 140upx;">姓名</view>
						<view>
							<input v-model="khname" class="text-right" placeholder="请输入姓名"/>
						</view>
					</view>
					<view class="flex justify-between  margin-top-lg">
						<view class="text-lg" style="color: #1E1F31;width: 140upx;">联系电话</view>
						<view>
							<input v-model="khphone" class="text-right" placeholder="请输入联系电话" type="number"/>
						</view>
					</view>
				</view>
				<view class="flex justify-between  margin-top-lg">
					<view class="text-lg" style="color: #1E1F31">单价
					</view>
					<view class="text-white">{{isVip? order.memberMoney :order.money}}元/{{order.unit}}</view>
				</view>
				<view class="flex justify-between  margin-top-lg" v-if="youhuiList.length!=0">
					<view class="text-lg" style="color: #1E1F31">优惠劵</view>
					<view class="text-white" @click="showYouhuijuan = true">{{couponName?-couponName:'立即使用'}}
						<u-icon name="arrow-right" color="#999999"></u-icon>
					</view>
				</view>
			</view>
			<view class="padding bg margin-top radius u-skeleton-fillet">
				<view class="flex justify-between">
					<view class="text-lg" style="color: #1E1F31;margin-right: 20upx;">备注说明</view>
					<textarea v-model="remark" class="text-white text-df flex-sub" placeholder="简单描述下您的要求"
						placeholder-style="text-align: right;" style="height: 200upx;text-align: right;"></textarea>
				</view>
			</view>
		</view>
		<view class="text-white flex justify-between cu-bar foot bg padding-lr" style="color: #557EFD;">
			<view>
				实付：<text>￥</text><text style="font-size: 38upx;margin-top: 8upx;">{{price}}</text>
			</view>
			<view class="">
				<u-button :custom-style="customStyle" @click="orderpay" shape="circle" :hair-line="false">立即支付
				</u-button>
			</view>
		</view>

		<u-skeleton :loading="loading" :animation="true" elColor='#FFFFFF' bgColor='#FFFFFF'></u-skeleton>
		<!-- <u-skeleton :loading="loading" :animation="true" elColor='#1E1F31' bgColor='#ffffff'></u-skeleton> -->
		<u-popup v-model="showPay" mode="bottom" border-radius="14" :closeable="true">
			<view
				style="width: 100%;text-align: center;font-size:38rpx;font-weight: bold;margin-top:15rpx;margin-bottom: 80rpx;">
				选择支付方式
			</view>
			<view style="display: flex;height: 100upx;align-items: center;padding: 20upx 30rpx;"
				v-for="(item,index) in openLists" :key='index'>
				<view style="display: flex;width:80%;align-items: center;">
					<image :src="item.image" style="width: 55upx;height: 55upx;border-radius: 50upx;"></image>
					<view style="font-size: 30upx;margin-left: 20upx;width: 70%;">{{item.text}}
					</view>
				</view>
				<view style="width: 20%;display: flex;justify-content: flex-end;">
					<radio-group name="openWay" style="margin-left: 20upx;" @tap='selectWay(item.id)'>
						<label class="tui-radio">
							<radio color="#1789FD" :checked="openWay === item.id ? true : false" />
						</label>
					</radio-group>
				</view>
			</view>
			<view
				style="width: 690rpx;height: 80rpx;background:#1789FD;color:#FFFFFF;text-align: center;line-height: 80rpx;border-radius: 50rpx;margin: 30rpx;"
				@tap="pay()">确认支付</view>
		</u-popup>
		<u-picker v-model="show" mode="time" :params="params" @confirm="statusChange"></u-picker>

		<view class="box" v-if="timeTrue">
			<view class="paybox padding">
				<view class="flex justify-between align-center">
					<view class="text-bold text-lg">选择预约时间</view>
					<image @tap="timeTrue = false" src="../../../static/images/msg/close.png"
						style="width: 40upx;height: 40upx;">
					</image>
				</view>
				<view class="margin-top-xl">
					<scroll-view scroll-x="true" class="scroll-view">
						<view class="scroll-item" v-for="(item,index) in orderData" :key="index"
							:class="tabIndex==index?'active':''" @click="changeIndex(index)">
							<view>{{item.name}}</view>
							<view class="margin-top-xs">{{item.data}}</view>
						</view>
					</scroll-view>
				</view>

				<view class="list" v-if="timeList.length > 0">
					<view class="box1" v-for="(item, i1) in timeList" :key="i1" @tap="getTimeSel(i1,item)"
						:class="i1==index_time?'active1':''">
						<view v-if='item.over' style="color: #999999;" :class="index_time == i1 ? 'sel-on' : ''">
							<view>{{item.serviceTime}}</view>
							<view v-if='item.over' class="margin-top-xs">已过期</view>
						</view>

						<view v-else-if='item.isMax==1' style="color: #999999;"
							:class="index_time == i1 ? 'sel-on' : ''">
							<view>{{item.serviceTime}}</view>
							<view v-if='item.isMax==1' class="margin-top-xs">已预约满</view>
						</view>
						<view v-else :class="index_time == i1 ? 'sel-on' : ''">
							<view>{{item.serviceTime}}</view>
							<view class="margin-top-xs">可预约</view>
						</view>
					</view>
				</view>

			</view>
		</view>

		<u-popup v-model="showYouhuijuan" mode="bottom" border-radius="14" height="900rpx" :closeable="true">
			<view style="padding-bottom: 30rpx;">
				<view
					style="width: 100%;text-align: center;font-size:38rpx;font-weight: bold;padding-top:15rpx;padding-bottom:40rpx;">
					优惠劵
				</view>
				<view class="margin-right text-right" @click="qingkong">
					<view class="noyouhui">不使用优惠劵</view>
				</view>
				<view class="listbox" v-for="(item,ind) in youhuiList" :key="ind">
					<view class="flex align-start justify-between padding-lr">
						<view>
							<view style="color: #000000;font-size: 30upx;">{{item.couponName}}</view>
							<view style="color: #999999;font-size: 24upx;margin-top: 10upx;" v-if="item.expirationTime">
								有效期至{{item.expirationTime}}
							</view>
							<view style="color: #999999;font-size: 24upx;margin-top: 10upx;" v-else>永久有效
							</view>
						</view>
						<view style="color: #FD3C44;font-size: 30upx;">¥<text
								style="font-size: 48upx;font-weight: bold;">{{item.money}}</text></view>
					</view>
					<view style="width: 100%;border-top:1rpx dashed #E6E6E6;margin: 30upx 0upx;"></view>
					<view class="flex align-center justify-between padding-lr">
						<view v-if="item.minMoney">满{{item.minMoney}}元可用</view>
						<view v-else>无门槛使用</view>
						<view class="btn" @click="youhuiPay(item)">立即使用</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import address from '@/utils/area.js'
	export default {
		data() {
			return {
				loading: true, // 是否显示骨架屏组件
				customStyle: {
					width: '340upx',
					color: '#FFFFFF',
					background: "#557EFD",
					border: 0
				},
				value: 1,
				remark: '',
				id: '',
				order: {},
				price: 0,
				totalprice: 0,
				isVip: false,
				mobile: '',
				name: '',
				cityaddress: '',
				detailaddress: '',
				latitude: '',
				longitude: '',
				province: '',
				city: '',
				district: '',
				startTime: '',
				show: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: false,
					second: false
				},
				minNum: 1,
				disabled: false,
				addressId: '',
				showPay: false,
				openWay: 0,
				openLists: [{
					image: '../../../static/images/zhifubao.png',
					text: '支付宝',
					id: 1
				}, {
					image: '../../../static/images/icon_weixin.png',
					text: '微信',
					id: 2
				}],
				// category: [{
				// 		name: '今天'
				// 	},
				// 	{
				// 		name: '明天'
				// 	},
				// 	{
				// 		name: '后天'
				// 	}
				// ],
				orderData: [],
				tabIndex: 0,
				timeTrue: false,
				TabCur: 0,
				timeList: [],
				dateList: [],
				index_time: -1,
				serviceTimeId: '',
				paySel: false,
				showYouhuijuan: false,
				youhuiList: [],
				couponId: '',
				couponName: '',
				youhuiMoney: 0,
				page: 1,
				limit: 10,
				ordersId: '',
				//是否在限制区域内
				isQy: true,
				khname: '',
				khphone: '',
			}
		},
		onLoad(option) {
			console.log(option)
			this.id = option.id
			// this.startTime = option.startTime
			this.isVip = uni.getStorageSync('isVIP')

			this.getMyList();
			// #ifdef APP-PLUS
			this.openLists = [{
				image: '../../../static/images/zhifubao.png',
				text: '支付宝',
				id: 1
			}, {
				image: '../../../static/images/icon_weixin.png',
				text: '微信',
				id: 2
			}, {
				image: '../../../static/images/lingqian.png',
				text: '零钱',
				id: 3
			}];
			this.openWay = 1;
			// #endif

			// #ifdef MP-WEIXIN
			this.openLists = [{
				image: '../../../static/images/icon_weixin.png',
				text: '微信',
				id: 2
			}, {
				image: '../../../static/images/lingqian.png',
				text: '零钱',
				id: 3
			}];
			this.openWay = 2;
			// #endif

			// #ifdef H5
			let ua = navigator.userAgent.toLowerCase();
			if (ua.indexOf('micromessenger') !== -1) {
				//公众号是否自动登录  237
				this.$Request.get('/app/common/type/237').then(res => {
					if (res.data && res.data.value && res.data.value == '是') {
						this.openLists = [{
							image: '../../../static/images/my/zhifubao.png',
							text: '支付宝',
							id: 1
						}, {
							image: '../../../static/images/my/icon_weixin.png',
							text: '微信',
							id: 2
						}, {
							image: '../../../static/images/lingqian.png',
							text: '零钱',
							id: 3
						}];
						this.openWay = 2;
					} else {
						this.openLists = [{
							image: '../../../static/images/my/zhifubao.png',
							text: '支付宝',
							id: 1
						}, {
							image: '../../../static/images/lingqian.png',
							text: '零钱',
							id: 3
						}];
						this.openWay = 1;
					}
				})
			} else {
				this.openLists = [{
					image: '../../../static/images/my/zhifubao.png',
					text: '支付宝',
					id: 1
				}, {
					image: '../../../static/images/lingqian.png',
					text: '零钱',
					id: 3
				}];
				this.openWay = 1;
			}
			// #endif


			var arr = []
			for (let i = 0; i < 7; i++) {
				var now = new Date();
				//24 * 3600 * 1000 就是计算一天的时间  
				var date = new Date(now.getTime() + i * 24 * 3600 * 1000);
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				let da = year + "-" + month + "-" + day
				let data = month + "月" + day + '日'
				var weekArray = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
				var week = weekArray[new Date(da).getDay()];
				var order = {
					name: '',
					data: ''
				}
				order.name = week
				order.data = data
				this.dateList.push(da)
				arr.push(order)
			}
			this.orderData = arr
			console.log(arr, '==========')
			// var now = new Date();
			// //24 * 3600 * 1000 就是计算一天的时间  
			// var date = new Date(now.getTime()+0 * 24 * 3600 * 1000);
			// var year = date.getFullYear();
			// var month = date.getMonth() + 1;
			// var day = date.getDate();
			// // console.log(year + "-" + month + "-" + day)
			// // return
			// let time = year + "-" + month + "-" + day
			// this.dateList = time


		},
		destryed() {
			uni.removeStorageSync('EditAddress')
		},
		onShow() {
			this.addressId = this.$queue.getData('EditAddress');
			this.getDet()
			this.qingkong();
			// let that = this
			// setTimeout(function() {
			// that.addressId = that.$queue.getData('EditAddress');
			// 	if (that.addressId) {
			// 		that.getAddressList(that.addressId);
			// 	} else {
			// 		// console.log('ahdsksdsadds')
			// 		that.addressMy()
			// 	}
			// }, 100)
		},
		methods: {
			qingkong() {
				this.couponId = ''
				this.couponName = ''
				let price = this.totalprice
				this.price = parseFloat(price * this.value).toFixed(2)
				this.showYouhuijuan = false
			},
			youhuiPay(e) {
				let price = parseFloat(this.totalprice * this.value).toFixed(2)
				if (Number(price) >= Number(e.minMoney)) {
					// let totalprice = parseFloat(price * this.value).toFixed(0)
					this.price = parseFloat(price - e.money).toFixed(2)
				} else {
					uni.showToast({
						title: '使用优惠劵，下单金额必须大于' + e.minMoney + '元',
						icon: 'none'
					})
					return
				}

				this.youhuiMoney = e.money
				this.openWay = 3
				this.couponId = e.id
				this.couponName = e.money
				this.showYouhuijuan = false

			},
			getMyList() {
				let data = {
					status: 0
				}
				this.$Request.getT('/app/couponUser/getMyCouponList', data).then(res => {
					if (res.code == 0) {
						if (this.page == 1) {
							this.youhuiList = res.data.records
						} else {
							this.youhuiList = [...this.youhuiList, ...res.data.records]
						}
					}
				});
			},
			getRunTime() {
				// let userId = uni.getStorageSync('userId');
				//查询时间列表
				let data = {
					userId: this.order.userId,
					id: this.order.id,
					time: this.dateList[this.tabIndex]
				}

				this.$Request.getT('/app/serviceTime/selectServiceTime', data).then(res => {
					if (res.code == 0) {
						this.timeList = [];

						var now = new Date();
						var hh = now.getHours(); //时
						var ii = now.getMinutes(); //分
						// var date = new Date(now.getTime() + i * 24 * 3600 * 1000);
						var year = now.getFullYear();
						var month = now.getMonth() + 1;
						var day = now.getDate();
						let da = year + "-" + month + "-" + day


						var nowTime = hh + ':' + ii
						res.data.forEach(d => {
							if (d.serviceTime) {
								let newTime = {}
								let over = ''
								if (this.dateList[this.tabIndex] == da) {
									console.log('888')
									let lastTime = d.serviceTime.split('~')[1]
									over = this.CompareDate(lastTime, nowTime)
									if (!over) {
										if (d.isMax == 1) {
											over = true
										} else {
											over = false
										}
									}
								} else {

									if (d.isMax == 1) {
										over = true
									} else {
										over = false
									}
								}

								// console.error('当前时间' + nowTime + '----结束时间' + lastTime + '---' + over)
								newTime.serviceTime = d.serviceTime
								newTime.over = over
								newTime.serviceTimeId = d.serviceTimeId
								newTime.isMax = d.isMax
								this.timeList.push(newTime)
							}
						});
					}
				})
			},
			CompareDate(time1, time2) {
				var date = new Date();
				var a = time1.split(":");
				var b = time2.split(":");
				return date.setHours(a[0], a[1]) < date.setHours(b[0], b[1]);
			},
			getTimeSel(index, item) {
				if (item.over && this.tabIndex == 0) {
					this.$queue.showToast('当前时间段已过请选择其他时间段')
				} else if (item.isMax == 1 && this.tabIndex == 0) {
					this.$queue.showToast('当前时间段已预约满请选择其他时间段')
				} else {
					this.index_time = index;
					this.startTime = this.dateList[this.tabIndex] + ' ' + this.timeList[index].serviceTime
					this.serviceTimeId = this.timeList[index].serviceTimeId
					this.timeTrue = false;
				}

			},
			changeIndex(index) {
				this.tabIndex = index
				this.getRunTime()
			},
			tabSelect(index, item) {
				if (item == '今天') {
					var now = new Date();
					//24 * 3600 * 1000 就是计算一天的时间  
					var date = new Date(now.getTime() + 0 * 24 * 3600 * 1000);
					var year = date.getFullYear();
					var month = date.getMonth() + 1;
					var day = date.getDate();
					let time = year + "-" + month + "-" + day
					this.dateList = time
					this.getRunTime()
					this.TabCur = index;
				} else if (item == '明天') {
					var now = new Date();
					//24 * 3600 * 1000 就是计算一天的时间  
					var date = new Date(now.getTime() + 1 * 24 * 3600 * 1000);
					var year = date.getFullYear();
					var month = date.getMonth() + 1;
					var day = date.getDate();
					let time = year + "-" + month + "-" + day
					this.dateList = time
					this.getRunTime()
					this.TabCur = index;
				} else if (item == '后天') {
					var now = new Date();
					//24 * 3600 * 1000 就是计算一天的时间  
					var date = new Date(now.getTime() + 2 * 24 * 3600 * 1000);
					var year = date.getFullYear();
					var month = date.getMonth() + 1;
					var day = date.getDate();
					let time = year + "-" + month + "-" + day
					this.dateList = time
					this.getRunTime()
					this.TabCur = index;
				}

				// this.index_time = index;
			},
			selectWay: function(id) {
				this.openWay = id;
			},
			// 根据地址id查询地址
			getAddressList(addressId) {
				if (addressId) {
					this.$Request.getT('/app/address/selectAddressByAddressId?addressId=' + this.addressId).then(res => {
						console.log(res)
						if (res.code == 0 && res.data) {
							this.name = res.data.name;
							this.mobile = res.data.phone;
							this.cityaddress = res.data.province + res.data.city + res.data.district;
							this.detailaddress = res.data.detailsAddress;
							this.isDefault = res.data.isDefault;
							this.userId = res.data.userId;
							this.latitude = res.data.latitude;
							this.longitude = res.data.longitude;
							this.province = res.data.province
							this.city = res.data.city
							this.district = res.data.district
							// let citydata =  uni.getStorageSync('city') 
							// if (this.order.region != res.data.city) {
							// 	uni.showToast({
							// 		title: '当前服务不支持下单地址',
							// 		icon: 'none',
							// 		duration: 1000
							// 	})
							// }
							let names = this.findNamesByCodes(JSON.parse(this.order.restrictedArea));
							console.log("names", names)
							if (!names.includes(res.data.district)) {
								this.isQy = false;
								uni.showToast({
									title: '当前服务不支持下单地址',
									icon: 'none',
									duration: 1000
								})
							}
						} else {
							this.name = ''
							this.mobile = ''
							this.cityaddress = ''
							this.detailaddress = ''
							this.isDefault = ''
							this.userId = ''
							this.latitude = ''
							this.longitude = ''
							this.province = ''
							this.city = ''
							this.district = ''
							this.addressId = ''
							this.isQy = false;
						}
						// uni.hideLoading();
					});
				} else {
					uni.navigateTo({
						url: '../../../my/address/address?id=' + 1
					})
				}
			},
			// 获取默认地址
			addressMy() {
				this.$Request.getT('/app/address/selectAddressById').then(res => {
					console.log(res)
					if (res.code == 0 && res.data) {
						this.name = res.data.name;
						this.mobile = res.data.phone;
						this.cityaddress = res.data.province + res.data.city + res.data.district;
						this.detailaddress = res.data.detailsAddress;
						this.isDefault = res.data.isDefault;
						this.userId = res.data.userId;
						this.latitude = res.data.latitude;
						this.longitude = res.data.longitude;
						this.province = res.data.province
						this.city = res.data.city
						this.district = res.data.district
						this.addressId = res.data.addressId
						// this.$queue.setData('EditAddress', res.data.addressId);
						// let citydata =  uni.getStorageSync('city')
						// if (this.order.region != res.data.city) {
						// 	uni.showToast({
						// 		title: '当前服务不支持下单地址',
						// 		icon: 'none',
						// 		duration: 1000
						// 	})
						// }
						let names = this.findNamesByCodes(JSON.parse(this.order.restrictedArea));
						console.log("names", names)
						if (!names.includes(res.data.district)) {
							uni.showToast({
								title: '当前服务不支持下单地址',
								icon: 'none',
								duration: 1000
							})
							this.isQy = false;
						}
					} else {
						this.name = ''
						this.mobile = ''
						this.cityaddress = ''
						this.detailaddress = ''
						this.isDefault = ''
						this.userId = ''
						this.latitude = ''
						this.longitude = ''
						this.province = ''
						this.city = ''
						this.district = ''
						this.addressId = ''
						this.isQy = false;
					}
				});
			},
			//根据code查询
			findNamesByCodes(codes) {
				let names = [];
				// 递归函数来遍历数据
				function traverse(dataset) {
					dataset.forEach(item => {
						// 检查code是否在codes集合中
						for (let i = 0; i < codes.length; i++) {
							if (codes[i] === item.code) {
								names.push(item.name);
								break; // 找到匹配的code后跳出循环
							}
						}
						// 如果有子节点，递归遍历子节点
						if (item.children) {
							traverse(item.children);
						}
					});
				}
				// 开始递归遍历
				traverse(address.data);
				return names;
			},
			// 选择预约时间
			statusChange(e) {
				console.log(e.month + '-' + e.day + ' ' + e.hour)
				var myDate = new Date();
				if (e.month > myDate.getMonth() + 1) {
					console.log(e.month >= myDate.getMonth() + 1, 1111, e.month)
					this.startTime = e.month + '-' + e.day + ' ' + e.hour
				} else {
					if (e.day > myDate.getDate()) {
						console.log(e.day > myDate.getDate(), 22222)
						this.startTime = e.month + '-' + e.day + ' ' + e
							.hour
					} else {
						if (e.hour - myDate.getHours() >= 1) {
							// console.log(e.hour - myDate.getHours() >= 1, 3333)
							this.startTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour
						} else {
							uni.showToast({
								title: '选择时间大于当前一小时',
								icon: 'none',
								duration: 1000
							})
						}
					}
				}
			},
			// // 添加地址
			// bindToAdd(){
			// 	uni.navigateTo({
			// 		url:'../../../my/address/address'
			// 	})
			// },
			// 详情
			getDet() {
				this.$Request.get("/app/orderTaking/queryTakingDetails", {
					id: this.id
				}).then(res => {
					if (res.code == 0) {
						this.order = res.data
						let price = this.isVip ? this.order.memberMoney : this.order.money
						this.value = res.data.minNum
						this.minNum = res.data.minNum
						this.price = price * res.data.minNum
						this.totalprice = price
						//判断是否存在addressId 和 服务方式
						if (this.addressId && this.order.serviceMethod === '1') {
							this.getAddressList(this.addressId);
						} else if (this.order.serviceMethod === '1') {
							this.addressMy()
						}
						this.getRunTime()

						this.order.gameName = res.data.gameName.split(',')
						this.loading = false;

					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				});
			},
			valChange() {
				// this.price = this.price * this.value
				let price = this.totalprice
				if (!this.couponId) {
					this.price = parseFloat(price * this.value).toFixed(2)

				} else {
					let totalprice = parseFloat(price * this.value).toFixed(2)
					this.price = parseFloat(totalprice - this.couponName).toFixed(2)

				}
			},

			orderpay() {
				if (!this.detailaddress && this.order.serviceMethod === '1') {
					uni.showToast({
						title: '请添加地址',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if (!this.startTime) {
					uni.showToast({
						title: '请选择预约时间',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if (this.order.serviceMethod === '2' && !this.khname) {
					uni.showToast({
						title: '姓名不能为空',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if (this.order.serviceMethod === '2' && !this.khphone) {
					uni.showToast({
						title: '联系电话不能为空',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if (!this.isQy) {
					uni.showToast({
						title: '当前服务不支持下单地址',
						icon: 'none',
						duration: 1000
					})
					return
				}
				this.showPay = true
			},
			pay() {
				if (this.paySel) {
					return;
				}
				let that = this
				that.paySel = true;
				// this.addressMy()
				// if (this.addressId == '') {
				// 	this.getAddressList();
				// }
				// let addressId = this.$queue.getData('EditAddress');
				that.$Request.get("/app/orders/generateOrder", {
					id: that.order.id,
					type: 1,
					orderNumber: that.value,
					remarks: that.remark,
					addressId: that.addressId ? that.addressId : '',
					startTime: that.startTime,
					serviceTimeId: that.serviceTimeId,
					couponId: that.couponId,
					khname: that.khname,
					khphone: that.khphone
				}).then(res => {
					if (res.code == 0) {
						that.showPay = false;
						that.ordersId = res.data.ordersId
						uni.showModal({
							title: '付款提示',
							content: '确认支付' + that.price + '元吗?',
							success: function(re) {
								if (re.confirm) {
									//classify  1app  2公众号 3小程序
									let classify = 1;
									if (that.openWay == 2) { //微信
										// #ifdef MP-WEIXIN
										that.$Request.post("/app/wxPay/wxPayOrder", {
											orderId: res.data.ordersId,
											classify: 3
										}).then(red => {
											if (red.code == 0) {
												uni.requestPayment({
													provider: 'wxpay',
													timeStamp: red.data.timestamp,
													nonceStr: red.data.noncestr,
													package: red.data.package,
													signType: red.data.signType,
													paySign: red.data.sign,
													success: function(redd) {
														that.paySel = false;
														uni.removeStorageSync(
															'EditAddress')
														uni.showLoading({
															title: '支付成功'
														});
														setTimeout(function() {
															uni
																.hideLoading();
															// uni.redirectTo({
															// 	url: '/my/order/pay?id=' +res.data.ordersId
															// })
															uni.redirectTo({
																url: '/my/order/index'
															})
														}, 1000)
													},
													fail: function(err) {
														that.paySel = false;
														uni.hideLoading();
														that.$queue.showToast(
															'支付失败');
														setTimeout(function() {
															uni
																.hideLoading();
															uni.redirectTo({
																url: '/my/order/pay?id=' +
																	res
																	.data
																	.ordersId
															})
														}, 1000)
													}
												});
											} else {
												that.paySel = false;

												uni.showToast({
													title: red.msg,
													icon: 'none'
												})
												setTimeout(function() {
													uni.hideLoading();
													uni.redirectTo({
														url: '/my/order/pay?id=' +
															res.data.ordersId
													})

												}, 1000)
											}
										});
										// #endif

										// #ifdef H5
										that.$Request.post("/app/wxPay/wxPayOrder", {
											orderId: res.data.ordersId,
											classify: 2
										}).then(red => {
											if (red.code == 0) {
												that.callPay(red.data);
											} else {
												that.paySel = false;
												uni.showToast({
													title: red.msg,
													icon: 'none'
												})
												setTimeout(function() {
													uni.hideLoading();
													uni.redirectTo({
														url: '/my/order/pay?id=' +
															res.data.ordersId
													})

												}, 1000)
											}
										});
										// #endif

										// #ifdef APP-PLUS
										that.$Request.post("/app/wxPay/wxPayOrder", {
											orderId: res.data.ordersId,
											classify: 1
										}).then(red => {
											if (red.code == 0) {
												console.log(JSON.stringify(red))
												that.setPayment('wxpay', JSON.stringify(red
													.data));
											} else {
												that.paySel = false;
												uni.showToast({
													title: red.msg,
													icon: 'none'
												})
												setTimeout(function() {
													uni.hideLoading();
													uni.redirectTo({
														url: '/my/order/pay?id=' +
															res.data.ordersId
													})

												}, 1000)
											}
										});
										// #endif

									} else if (that.openWay == 1) { //支付宝
										// #ifdef H5
										that.$Request.post("/app/aliPay/payOrder", {
											orderId: res.data.ordersId,
											classify: 2
										}).then(red => {
											if (red.code == 0) {
												that.paySel = false;
												const div = document.createElement('div')
												div.innerHTML = red.data //此处form就是后台返回接收到的数据
												document.body.appendChild(div)
												document.forms[0].submit()
											} else {
												that.paySel = false;
												uni.showToast({
													title: red.msg,
													icon: 'none'
												})
												setTimeout(function() {
													uni.hideLoading();
													uni.redirectTo({
														url: '/my/order/pay?id=' +
															res.data.ordersId
													})

												}, 1000)
											}
										});
										// #endif
										// #ifdef APP-PLUS
										that.$Request.post("/app/aliPay/payOrder", {
											orderId: res.data.ordersId,
											classify: 1
										}).then(red => {
											if (red.code == 0) {
												that.setPayment('alipay', red.data);
											} else {
												that.paySel = false;
												uni.showToast({
													title: red.msg,
													icon: 'none'
												})
												setTimeout(function() {
													uni.hideLoading();
													uni.redirectTo({
														url: '/my/order/pay?id=' +
															res.data.ordersId
													})

												}, 1000)
											}
										});
										// #endif
									} else if (that.openWay == 3) { //零钱
										that.$Request.post("/app/orders/payMoney", {
											ordersId: res.data.ordersId,
										}).then(red => {
											if (red.code == 0) {
												that.paySel = false;
												uni.showToast({
													title: '支付成功'
												})
												setTimeout(function() {
													uni.hideLoading();
													// uni.redirectTo({
													// 	url: '/my/order/pay?id=' +res.data.ordersId
													// })
													uni.redirectTo({
														url: '/my/order/index'
													})
												}, 1000)

												uni.removeStorageSync('EditAddress')

											} else {
												uni.showToast({
													title: red.msg,
													icon: 'none'
												})
												setTimeout(function() {
													uni.hideLoading();
													uni.redirectTo({
														url: '/my/order/pay?id=' +
															res.data.ordersId
													})

												}, 1000)
											}
										});
									}
								} else if (re.cancel) {
									that.paySel = false;
									console.log('用户点击取消');
									// uni.removeStorageSync('EditAddress')
								}
							}

						})

					} else {
						that.paySel = false;
						that.$queue.showToast(res.msg)
					}

				});
			},
			callPay: function(response) {
				if (typeof WeixinJSBridge === "undefined") {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(response), false);
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(response));
						document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(response));
					}
				} else {
					this.onBridgeReady(response);
				}
			},
			onBridgeReady: function(response) {
				let that = this;
				if (!response.package) {
					return;
				}
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": response.appid, //公众号名称，由商户传入
						"timeStamp": response.timestamp, //时间戳，自1970年以来的秒数
						"nonceStr": response.noncestr, //随机串
						"package": response.package,
						"signType": response.signType, //微信签名方式：
						"paySign": response.sign //微信签名
					},
					function(res) {
						if (res.err_msg === "get_brand_wcpay_request:ok") {
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							uni.removeStorageSync('EditAddress')
							that.paySel = false;
							uni.showLoading({
								title: '支付成功'
							});
							uni.hideLoading();
							setTimeout(function() {
								uni.hideLoading();
								// uni.redirectTo({
								// 	url: '/my/order/pay?id=' +that.ordersId
								// })
								uni.redirectTo({
									url: '/my/order/index'
								})
							}, 1000)
						} else {
							that.paySel = false;
							uni.hideLoading();
							setTimeout(function() {
								uni.hideLoading();
								uni.redirectTo({
									url: '/my/order/pay?id=' + that.ordersId
								})
							}, 1000)
						}
						WeixinJSBridge.log(response.err_msg);
					}
				);
			},
			setPayment(name, order) {
				let that = this;
				uni.requestPayment({
					provider: name,
					orderInfo: order, //微信、支付宝订单数据
					success: function(res) {
						that.paySel = false;
						uni.removeStorageSync('EditAddress')
						uni.showLoading({
							title: '支付成功'
						});
						uni.hideLoading();
						setTimeout(function() {
							uni.hideLoading();
							// uni.redirectTo({
							// 	url: '/my/order/pay?id=' +that.ordersId
							// })
							uni.redirectTo({
								url: '/my/order/index'
							})
						}, 1000)
					},
					fail: function(err) {
						that.paySel = false;
						uni.hideLoading();
						setTimeout(function() {
							uni.hideLoading();
							uni.redirectTo({
								url: '/my/order/pay?id=' + that.ordersId
							})
						}, 1000)
					}
				});
			}
		},
		// computed: {
		// 	price() {
		// 		let price = this.isVip ? this.order.memberMoney : this.order.money
		// 		// console.log(price * 1 * this.value)
		// 		return (price * this.value).toFixed(2)
		// 	}
		// },
		onReachBottom: function() {
			this.page = this.page + 1;
			this.getMyList()
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getMyList()
		},
	}
</script>

<style lang="less">
	textarea::-webkit-input-placeholder {
		color: red;

	}

	page {
		background-color: #F5F5F5;
	}

	.bg {
		background-color: #FFFFFF;
	}

	.box {
		width: 100%;
		height: 162vh;
		background: rgba(0, 0, 0, 0.7);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;

	}

	.paybox {
		width: 750upx;
		height: 857upx;
		background: #FFFFFF;
		border-radius: 32upx 32upx 0upx 0upx;
		position: fixed;
		bottom: 0upx;
		left: 0;
		right: 0;
		z-index: 999;
	}

	.list {
		display: flex;
		flex-wrap: wrap;
		margin-top: 30upx;

		.box1 {
			text-align: center;
			padding: 30upx 20upx;
			background: #F2F2F2;
			color: #000;
			margin-right: 20upx;
			border-radius: 16upx;
			margin-bottom: 20rpx;

			.sel-on {
				color: #45AEFF;

			}
		}

		.active1 {
			border: 1rpx solid #51B5FF;
			background: #EBF7FF;
		}
	}


	.scroll-view {
		width: 100%;
		// height: 100upx;
		white-space: nowrap;
		background: #ffffff;
		// padding-left: 30upx;
	}

	.scroll-item {
		display: inline-block;
		width: 130upx;
		// height: 0upx;
		padding: 25upx 10upx;
		background: #F7F7F7;
		margin-right: 30upx;
		border-radius: 16upx;
		text-align: center;
		// line-height: 60upx;
	}

	.active {
		background: #EBF7FF;
		color: #51B5FF;

	}

	.listbox {
		/* background: #FFFFFF; */
		background: #F5F5F5;
		margin: 30rpx 30rpx;
		border-radius: 24rpx;
		padding: 30rpx 0;
	}

	.btn {
		color: #FD3C44;
		border: 1rpx solid #FD3C44;
		border-radius: 55upx;
		padding: 8upx 25upx;
	}

	.noyouhui {
		color: #FD3C44;
		border: 1rpx solid #FD3C44;
		border-radius: 15upx;
		display: inline-block;
		padding: 5rpx 20rpx;
	}
</style>